<!--
 * @Author: your name
 * @Date: 2021-10-30 12:55:19
 * @LastEditTime: 2023-07-04 08:14:00
 * @LastEditors: wiz
 * @Description: In User Settings Edit
 * @FilePath: \wy\src\components\base\toolbar\tb.vue
-->
<template>
  <div class="wy-toolbar">
    <template v-for="(dt, idx) in data">
      <svg
        v-if="idx !== 0 && !dt.noSeparator"
        :key="-idx"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        class="separator"
      >
        <rect width="1" height="20" fill="#cfcaca"></rect>
      </svg>
      <Dropdown
        v-if="dt.childs && dt.childs.length > 0"
        :key="idx"
        class="btn-dd"
        placement="bottom-start"
        @on-visible-change="
          visible => {
            onVisibleChange(visible, idx);
          }
        "
        :trigger="!dt.disabled ? 'hover' : 'custom'"
      >
        <!-- trigger="custom"
        :visible="menuShows[idx]" -->
        <Button
          type="text"
          :disabled="dt.disabled"
          :class="['titbtn', dt.disabled && 'disabled']"
          @click="dt.click && dt.click(dt, $event), handleClickLink(dt, $event)"
        >
          <Icon v-if="dt.icon" :custom="'wy-icon ' + dt.icon"></Icon>
          <b v-if="dt.text"> {{ dt.text }} </b>
          <Icon
            :class="'aicon' + (menuShows[idx] ? ' rotate' : ' nRotate')"
            :custom="'wy-icon ' + (dt.aIcon || 'wy-fanhui')"
          ></Icon>
          <!-- @click.stop="showMenu(idx)" -->
        </Button>
        <DropdownMenu slot="list">
          <template v-for="(d, i) in dt.childs">
            <toolbarItem
              :key="i"
              v-if="d.childs && d.childs.length > 0 && !d.disabled"
              :data="d"
              @click="handleClickLink"
            ></toolbarItem>
            <DropdownItem v-else :key="i" :disabled="d.disabled">
              <p
                @click.stop="
                  !d.disabled &&
                    (d.click && d.click(d, $event), handleClickLink(d, $event))
                "
                type="text"
                :class="d.disabled && 'disabled'"
              >
                <Icon v-if="d.icon" :custom="'wy-icon ' + d.icon"></Icon>
                <b v-if="d.text"> {{ d.text }}</b>
              </p>
            </DropdownItem>
          </template>
        </DropdownMenu>
      </Dropdown>
      <Button
        v-else
        :key="idx"
        type="text"
        :disabled="dt.disabled"
        :class="['titbtn', dt.disabled && 'disabled']"
        @click.stop="
          dt.click && dt.click(dt, $event), handleClickLink(dt, $event)
        "
      >
        <Icon v-if="dt.icon" :custom="'wy-icon ' + dt.icon"></Icon>
        <b v-if="dt.text"> {{ dt.text }}</b>
        <Icon
          v-if="dt.aIcon"
          class="aicon"
          :custom="'wy-icon ' + dt.aIcon"
        ></Icon>
      </Button>
    </template>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Tsrv } from '@/services';
import toolbarItem from './toolbarItem.vue';

@Component({ components: { toolbarItem } })
export default class wyToolbar extends Vue {
  @Prop({ type: Array, required: true }) data: Array<any>;

  private toolbarList: Array<any>;

  onVisibleChange(visible: boolean, idx: any) {
    this.$set(this.menuShows, idx, visible);
  }

  showMenu(idx: any) {
    this.$set(this.menuShows, idx, !this.menuShows[idx]);
  }

  menuShows = {};

  handleClickLink(item: any, event: any) {
    this.$emit('click', item, event);
  }
}
</script>
<style lang="scss" scoped>
.wy-toolbar {
  display: flex;
  align-items: center;
  // justify-content: center;
  .separator {
    width: 1px;
    height: 14px;
  }
  .disabled {
    pointer-events: none;
    color: #c5c8ce;
  }
  .ivu-btn {
    transition: all 0s;
  }
  .ivu-icon {
    transition: all 0s;
  }
  .titbtn {
    height: 28px;
    align-items: center;
    display: flex;
    border-radius: 12px;
    font-size: var(--theme-font-size);
    padding: 0 8px;
    margin: 0px 5px;
    > span {
      display: block;
      height: 100%;
      line-height: 28px;
    }
    > span > i {
      font-size: var(--default-icon-size);
      display: inline-block;
    }
    > span > b {
      padding: 0px 7px;
      display: inline-block;
      font-weight: normal;
      padding-top: 1px;
      letter-spacing: 0.5px;
    }
    > span > .rotate {
      @keyframes rt {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(90deg);
        }
      }
      animation: rt 0.16s forwards;
    }
    > span > .nRotate {
      @keyframes nrt {
        from {
          transform: rotate(90deg);
        }
        to {
          transform: rotate(0deg);
        }
      }
      animation: nrt 0.16s forwards;
    }

    &:hover:not(.disabled) {
      color: var(--default-hover-font-color);
      background-color: var(--default-comp-hover-bgColor);
    }
    &.color-error:not(.disabled) {
      color: $toolbar-btn-color-error;
    }

    .titbtn-dot {
      width: 0;
      position: relative;
      display: block;
      float: left;
      &::after {
        content: '';
        height: 4px;
        width: 4px;
        border-radius: 2px;
        background-color: #fb4242;
        position: absolute;
        left: -2px;
        top: 4px;
      }
    }
  }
  ::v-deep.ivu-dropdown-item {
    padding: 0px;
    > p {
      padding-left: 12px;
      height: 28px;
      line-height: 28px;
      align-items: center;
      display: flex;
      > i {
        font-size: var(--default-icon-size);
        display: inline-block;
      }
      > b {
        padding-left: 7px;
        display: inline-block;
        font-weight: normal;
      }
      > .aicon {
        padding-left: 7px;
      }
      &:hover:not(.disabled) {
        color: var(--default-hover-font-color);
      }
      &.color-error:not(.disabled) {
        color: $toolbar-btn-color-error;
      }
    }
  }
}
</style>
